<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '历史学习记录',
  },
}
</route>

<script lang="ts" setup>
import { learnRecordApi } from '@/service/my/index'

const pageNum = ref(1)
const pageSize = ref(10)

const loading = ref(false)
const finished = ref(false)

// 修改状态管理
const state = ref<'loading' | 'finished' | 'error'>('loading')

// 课程列表信息
const courseList = ref<any[]>([])

// 请求历史学习记录
async function getDataRequest(isLoadMore = false) {
  if (loading.value || (finished.value && isLoadMore)) return
  loading.value = true
  const params = { pageNum: pageNum.value, pageSize: pageSize.value }
  const data: any = await learnRecordApi(params)
  if (data?.code === 200) {
    const { rows = [], total = 0 } = data || {}

    if (isLoadMore) {
      courseList.value = [...courseList.value, ...rows]
    } else {
      courseList.value = rows
    }

    // 判断是否加载完所有数据
    finished.value = courseList.value.length >= total
    state.value = finished.value ? 'finished' : 'loading'
  } else {
    console.error('获取课程列表失败:', data.msg)
    state.value = 'error'
  }
  loading.value = false
}

// 页面启动
onLoad(async () => {
  await getDataRequest(false)
})

// 加载更多数据
const loadMore = async () => {
  if (!loading.value && !finished.value) {
    pageNum.value++
    await getDataRequest(true)
  }
}

// 监听页面滚动到底部
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

// 跳转课程详情
const goToStudy = (course: any) => {
  uni.navigateTo({
    url: `/pages/course/detail?id=${course.id}`,
  })
}
</script>

<template>
  <view class="main_container">
    <!-- 骨架屏 -->
    <template v-if="loading && pageNum === 1">
      <wd-skeleton :row="3" animated />
    </template>
    <template v-else>
      <uni-list>
        <uni-list-item v-for="(record, index) in courseList" :key="index">
          <view class="list_item_container" @click="goToStudy(record)">
            <image :src="record.cover" class="course_image" />
            <view class="course_info">
              <!-- 标题 -->
              <text class="course_title">{{ record.name }}</text>
              <!-- 副标题 -->
              <text class="course-school">{{ record.teacherName }}</text>
              <!-- 学习进度 -->
              <text class="course-progress">已学习{{ record.learnedProgress }}</text>
            </view>
          </view>
        </uni-list-item>
      </uni-list>
    </template>

    <!-- 添加加载状态和加载完成的提示 -->
    <wd-loadmore :state="state" @reload="loadMore" finished-text="已经全部加载完毕"></wd-loadmore>
  </view>
</template>

<style scoped>
.main_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #f5f5f5;
}
.list_item_container {
  display: flex;
  align-items: center;
  padding: 15rpx;
  margin: 15rpx;
  background: #fff;
  border-radius: 10rpx;
}
.course_image {
  width: 210rpx;
  height: 146rpx;
  border-radius: 5rpx;
}
.course_info {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.course_title {
  margin-bottom: 5rpx;
  font-size: 25rpx;
  font-weight: bold;
}
.course-school {
  margin-top: 10rpx;
  margin-bottom: 30rpx;
  font-size: 20rpx;
  color: #999999;
}
.course-progress {
  font-size: 20rpx;
  font-weight: bolder;
}
</style>
